<!-- Description -->
<section id="description" class="card">
    <div class="card-header">
        <h4 class="card-title">Description</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <p class="card-text">An example of page header with page title, description, breadcrumbs at top &amp; content title.</p>
            <div class="alert bg-success alert-icon-left mb-2" role="alert">
                <span class="alert-icon"><i class="la la-pencil-square"></i></span>
                <strong>Experience it!</strong>
                <p>This page contain breadcrumbs top with description example, check on the top of the page container section.</p>
            </div>
        </div>
    </div>
</section>
<!--/ Description -->
<!-- HTML Markup -->
<section id="html-markup" class="card">
    <div class="card-header">
        <h4 class="card-title">HTML Markup</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <p class="card-text">This section contains HTML Markup to create page with breadcrumbs top with description.</p>
            <p class="card-text">You can use below HTML breadcrumbs top with description page header snippet in any type of layout. You can also custom above HTML snippet as per your requirements. Modern has a ready to use 10 different types of page headers.</p>
            <pre class="language-markup">
            <code class="language-markup">
              &lt;div class="content-header row"&gt;
                  &lt;div class="breadcrumb-wrapper col-12"&gt;
                    &lt;ol class="breadcrumb"&gt;
                      &lt;li class="breadcrumb-item"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Page headers&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="breadcrumb-item active"&gt;Breadcrumbs top with description
                      &lt;/li&gt;
                    &lt;/ol&gt;
                  &lt;/div&gt;
                  &lt;div class="content-header-left col-md-6 col-12"&gt;
                    &lt;h3 class="content-header-title mb-0"&gt;Breadcrumbs top with description&lt;/h3&gt;
                    &lt;p class="text-muted mb-0"&gt;Page header with description &amp; breadcrumbs at top&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="content-header-right col-md-6 col-12"&gt;
                    &lt;!-- Custom elements --&gt;
                  &lt;/div&gt;
                  &lt;div class="content-header-lead col-12 mt-1"&gt;
                    &lt;p class="lead"&gt;Page header with page title, description, breadcrumbs at top &amp; content title.&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            </code>
            </pre>
        </div>
    </div>
</section>
<!--/ HTML Markup -->
<!-- PUG Code -->
<section id="pug-code" class="card">
    <div class="card-header">
        <h4 class="card-title">PUG Configuration</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <p class="card-text">Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.</p>
            <h5 class="card-title mt-2">PUG Variables</h5>
            <p class="card-text">This table contains required PUG block to generate page with breadcrumbs top with description.</p>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Block</th>
                            <th>Parameter</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row"><code>page-header</code></th>
                            <td><code>'include page-headers/breadcrumbs-top-with-description'</code></td>
                            <td>You need to append <code>page-header</code> block parameter as <code>'include page-headers/breadcrumbs-top-with-description'</code>.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h5 class="card-title mt-2">PUG Code</h5>
            <p class="card-text">To generate page with breadcrumbs top with description header or template, you need to use following PUG code.</p>
            <p class="card-text"><span class="text-bold-600">Line no 22-23:</span> <code>page-header</code> block has a page/template specific configuration parameter, in that for breadcrumbs top with description header you need to define parameter <code>include page-headers/breadcrumbs-top-with-description</code>. However you can create your own page header PUG file in <code>pages/page-headers</code> folder.</p>
            <p class="card-text">If you want to use this layout on page level you need to define it on page it self. This template has one example pug file with breadcrumbs top with description <code>breadcrumbs-top-with-description.pug</code>.</p>
            <pre data-line="23-24" data-line-offset="11" class="language-pug">
            <code class="language-pug">
                block pageVars
                    - var pageTitle    = "Breadcrumbs top with description"
                    - var pageSubTitle = "Page header with description & breadcrumbs at top"
                    - var description  = "Page header with page title, description and breadcrumbs at top."
                    - var activeMenu   = "headers-breadcrumbs-top-with-description"
                
                extends template
                
                append breadcrumbs
                    +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Page headers"}, {name:"Breadcrumbs top with description"}])
                
                append page-header
                    include page-headers/breadcrumbs-top-with-description
                
                //- Include page content in page block
                append content
                    include ../contents/headers-breadcrumbs-top-with-description.html
                
                //- Page specific dependency
                //------------------------------
                
                //- Add custom page specific CSS
                block pagecss
                    link(rel='stylesheet', type='text/css', href='../../../app-assets/css/plugins/ui/prism.min.css')
                
                //- Add custom page specific JS
                block pagejs
                    script(type='text/javascript' ,src='../../../app-assets/vendors/js/ui/prism.min.js')
            </code>
            </pre>
        </div>
    </div>
</section>
<!--/ PUG Code -->
